<template>
  <div>
    <el-dialog
      v-model="dialog"
      :title="$z.$t(title)"
      width="1200px"
      @closed="close"
      @open="openfn"
    >
      <el-form
        ref="elFrom"
        label-position="left"
        label-width="60px"
        :model="formdata"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$z.$t('桩名')">
              <el-input v-model="formdata['mc']" :readonly="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$z.$t('桩号')">
              <el-input v-model="formdata['gtel']" :readonly="true" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$z.$t('充电桩')">
              <vue-qr
                class="pointer"
                :correct-level="0"
                :logo-corner-radius="0"
                :margin="0"
                :size="100"
                :text="$z.qrcodestr(formdata.gtel, 0)"
                @click="ewmdialogfn($z.qrcodestr(formdata.gtel, 0))"
              />

              <!-- qrcode 纠错级别（'L'、'M'、'Q'、'H' 之一） -->
            </el-form-item>
          </el-col>
          <template v-if="formdata.gls != 1">
            <el-col
              v-for="(item, index) of tdewms"
              :key="index"
              :offset="index % 5 != 0 ? 1 : 0"
              :span="4"
            >
              <el-form-item :label="item.td + $z.$t('路')">
                <vue-qr
                  class="pointer"
                  :correct-level="0"
                  :logo-corner-radius="0"
                  :logo-src="item.src"
                  :margin="0"
                  :size="100"
                  :text="item.text"
                  @click="ewmdialogfn(item.text, item.src)"
                />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>
      <div ref="gtelcode" class="gtelcode">
        <vue-qr
          class="pointer"
          :correct-level="0"
          :logo-corner-radius="0"
          :margin="0"
          :size="500"
          :text="$z.qrcodestr(formdata.gtel, 0)"
          @click="ewmdialogfn($z.qrcodestr(formdata.gtel, 0))"
        />
      </div>
      <qrdown ref="qrdown" />
      <template #footer>
        <span class="dialog-footer">
          <el-button :loading="gtelbtn" type="primary" @click="gtelqrdown">
            {{ $z.$t('下载设备二维码') }}
          </el-button>
          <el-button
            v-if="formdata.gls != 1"
            :loading="tdbtn"
            type="primary"
            @click="tdqrdown"
          >
            {{ $z.$t('下载通道二维码') }}
          </el-button>
          <el-button @click="dialog = false">{{ $z.$t('关闭') }}</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="ewmdialog" title="二维码查看" width="800px">
      <vue-qr
        class="pointer"
        :correct-level="0"
        :logo-corner-radius="0"
        :logo-src="ewmdialogsrc"
        :margin="0"
        :size="500"
        style="display: block; margin: 0 auto"
        :text="ewmdialogstr"
      />
      <!-- <QrcodeVue
        class="pointer"
        :size="500"
        style="display: block; margin: 0 auto"
        :value="ewmdialogstr"
      /> -->
    </el-dialog>
  </div>
</template>

<script>
  import vueQr from 'vue-qr/src/packages/vue-qr.vue'
  import { ewmURL } from '@/config/net.config.js'
  import num1 from '@/assets/img/1.png'
  import num2 from '@/assets/img/2.jpg'
  import num3 from '@/assets/img/3.jpg'
  import num4 from '@/assets/img/4.jpg'
  import num5 from '@/assets/img/5.jpg'
  import num6 from '@/assets/img/6.jpg'
  import num7 from '@/assets/img/7.jpg'
  import num8 from '@/assets/img/8.jpg'
  import num9 from '@/assets/img/9.jpg'
  import num10 from '@/assets/img/10.jpg'
  import num11 from '@/assets/img/11.jpg'
  import num12 from '@/assets/img/12.jpg'
  import num13 from '@/assets/img/13.jpg'
  import num14 from '@/assets/img/14.jpg'
  import num15 from '@/assets/img/15.jpg'
  import num16 from '@/assets/img/16.jpg'
  import num17 from '@/assets/img/17.jpg'
  import num18 from '@/assets/img/18.jpg'
  import num19 from '@/assets/img/19.jpg'
  import num20 from '@/assets/img/20.jpg'
  import qrdown from '@/components/qrcodedown/index.vue'
  let nums = [
    num1,
    num2,
    num3,
    num4,
    num5,
    num6,
    num7,
    num8,
    num9,
    num10,
    num11,
    num12,
    num13,
    num14,
    num15,
    num16,
    num17,
    num18,
    num19,
    num20,
  ]
  export default {
    name: 'Qrcode',
    components: {
      vueQr,
      qrdown,
    },
    props: {},
    data() {
      return {
        nums: nums,
        dialog: false,
        title: '查看二维码',
        formdata: {},
        ewmURL: ewmURL,
        ewmdialog: false,
        ewmdialogstr: '',
        ewmdialogsrc: '',
        tdewms: [],
        tdbtn: false,
        gtelbtn: false,
      }
    },
    created() {},
    mounted() {},
    methods: {
      ewmdialogfn(str, src) {
        this.ewmdialog = true
        this.ewmdialogstr = str
        this.ewmdialogsrc = src
      },
      close() {},
      openfn() {},
      show(formdata) {
        this.formdata = formdata
        this.dialog = true
        this.glsfn()
      },
      tdqrdown() {
        this.tdbtn = true
        this.$refs.qrdown.download(this.formdata, () => {
          this.tdbtn = false
        })
      },
      gtelqrdown() {
        this.gtelbtn = true
        this.$z
          .zhtml2canvas(this.$refs.gtelcode, this.formdata.gtel)
          .then(() => {
            this.gtelbtn = false
          })
      },
      glsfn() {
        this.tdewms = []
        for (let i = 1; i <= this.formdata.gls; i++) {
          this.tdewms.push({
            src: [this.nums[i - 1]],
            text: this.$z.qrcodestr(this.formdata.gtel, i),
            td: i,
          })
        }
      },
    },
  }
</script>
<style>
  .gtelcode {
    position: fixed;
    top: -2000px;
    width: 500px;
    height: 500px;
  }
</style>
